<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // promise + Aysnc + Await
    // 1.proimise-消除嵌套回调（又名回调地狱）问题

    // 2.promise的基本使用
    // 1.promise的三种状态（只能由1变成2/3）一旦确定，就无法改变
        // 1.pending-进行中
        // 2.fulfilled-失败
        // 3.rejected-成功
    // 2.使用示例
        // 获取回调结果
    let p = new Promise((resolve,reject) => {
        setTimeout(() => {
            // resolve("ok")
            reject("error")
        },2000)
    })
        // 根据回调结果，调用相应的方法,回调参数，会变成箭头函数参数，直接接收即可
    p.then((msg) => {
        console.log("成功了",msg)
    },() => {
        console.log("失败了")
    })

    // 3.promise消除回调地狱-promise的链式调用
        // 1.封装异步函数
    function delay(time,n) {
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                resolve(n)
            },time)
        })
    }
    // 调用函数，获得函数返回值并.then打印参数，在then中，返回函数返回值，实现再次调用
    delay(2000,1).then((n1) => {
        console.log(n1)
        return delay(1000,2)
    }).then((n2) => {
        console.log(n2)
        return delay(3000,3)
    }).then((n3) => {
        console.log(n3)
    })

    // async + await异步终极解决方案
    // 创建回调函数
    function delay2(time2,n) {
        return new Promise((resolve2,reject2) => {
            setTimeout(() => {
                resolve2(n)
            },time2) 
        })
    }
    // 1.使用await修饰回调函数即可获得回调函数的参数
    // 2.必须使用async修饰await所在的函数名
    // 3.同步执行，前一个await执行完毕，才会执行后续的await
    async function print() {
        console.log(await delay2(1000,4))
        console.log(await delay2(2000,5))
        console.log(await delay2(3000,6))
    }
    print()
</script>
</html>